<template>
  <view class="container">
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>
    
    <view v-else-if="order" class="order-detail">
      <!-- 订单状态 -->
      <view class="status-section">
        <text class="status-text" :class="getStatusClass(order.statue)">
          {{ getStatusText(order.statue) }}
        </text>
        <text class="status-desc">{{ getStatusDesc(order.statue) }}</text>
      </view>
      
      <!-- 商品信息 -->
      <view class="product-section">
        <text class="section-title">商品信息</text>
        <view class="product-info">
          <text class="product-name">{{ order.productName }}</text>
          <text class="merchant-info">商家ID：{{ order.merchantId }}</text>
          <text class="quantity-info">购买数量：{{ order.num }}件</text>
        </view>
      </view>
      
      <!-- 价格明细 -->
      <view class="price-section">
        <text class="section-title">价格明细</text>
        <view class="price-list">
          <view class="price-item">
            <text class="price-label">积分支付</text>
            <text class="price-value">{{ formatPrice(order.pointAmount) }}</text>
          </view>
          <view class="price-item">
            <text class="price-label">支付宝支付</text>
            <text class="price-value">{{ formatPrice(order.payAmount) }}</text>
          </view>
          <view class="price-item total">
            <text class="price-label">订单总额</text>
            <text class="price-value">{{ formatPrice(order.amount) }}</text>
          </view>
        </view>
      </view>
      
      <!-- 订单信息 -->
      <view class="info-section">
        <text class="section-title">订单信息</text>
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">订单号</text>
            <text class="info-value">{{ order.id }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">下单时间</text>
            <text class="info-value">{{ formatTime(order.createTime) }}</text>
          </view>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="actions-section">
        <button 
          v-if="order.statue === 0" 
          class="pay-btn"
          @click="handlePay"
        >
          去支付
        </button>
        <button 
          class="back-btn"
          @click="goBack"
        >
          返回
        </button>
      </view>
    </view>
    
    <view v-else class="empty">
      <text class="empty-icon">❌</text>
      <text class="empty-text">订单不存在</text>
    </view>
  </view>
</template>

<script>
import { getOrderDetail } from '@/api/order.js'

export default {
  data() {
    return {
      orderId: null,
      order: null,
      loading: true
    }
  },
  onLoad(options) {
    this.orderId = options.id
    if (this.orderId) {
      this.loadOrderDetail()
    } else {
      this.loading = false
    }
  },
  methods: {
    // 加载订单详情
    async loadOrderDetail() {
      try {
        const res = await getOrderDetail(this.orderId)
        this.order = res.data
      } catch (error) {
        console.error('加载订单详情失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 去支付
    handlePay() {
      uni.navigateTo({
        url: `/pages/order/pay?orderId=${this.order.id}&amount=${this.order.amount}&pointAmount=${this.order.amount}`
      })
    },
    
    // 返回
    goBack() {
      uni.navigateBack()
    },
    
    // 获取状态文字
    getStatusText(status) {
      const statusMap = {
        0: '待支付',
        1: '已支付'
      }
      return statusMap[status] || '未知状态'
    },
    
    // 获取状态描述
    getStatusDesc(status) {
      const descMap = {
        0: '请尽快完成支付',
        1: '支付成功，订单已完成'
      }
      return descMap[status] || ''
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        0: 'status-pending',
        1: 'status-paid'
      }
      return classMap[status] || ''
    },
    
    // 格式化价格
    formatPrice(price) {
      return (price / 100).toFixed(2) + '元'
    },
    
    // 格式化时间
    formatTime(time) {
      if (!time) return ''
      return time
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 30rpx;
}

.loading, .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;
  color: #999;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
}

.order-detail {
  max-width: 600rpx;
  margin: 0 auto;
}

.status-section, .product-section, .price-section, .info-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.status-section {
  text-align: center;
}

.status-text {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 15rpx;
}

.status-text.status-pending {
  color: #fa8c16;
}

.status-text.status-paid {
  color: #52c41a;
}

.status-desc {
  font-size: 24rpx;
  color: #999;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 30rpx;
}

.product-info {
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.product-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 15rpx;
}

.merchant-info, .quantity-info {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}

.price-list {
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #e9ecef;
}

.price-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.price-item.total {
  border-top: 2rpx solid #dee2e6;
  padding-top: 20rpx;
  font-weight: bold;
}

.price-label {
  font-size: 28rpx;
  color: #666;
}

.price-value {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.price-item.total .price-value {
  color: #ff6b6b;
  font-size: 32rpx;
}

.info-list {
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 26rpx;
  color: #666;
}

.info-value {
  font-size: 26rpx;
  color: #333;
  text-align: right;
  max-width: 400rpx;
  word-break: break-all;
}

.actions-section {
  display: flex;
  gap: 20rpx;
  padding: 30rpx 0;
}

.pay-btn, .back-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 12rpx;
  border: none;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pay-btn {
  background: #ff6b6b;
  color: #fff;
}

.pay-btn::after {
  border: none;
}

.back-btn {
  background: #667eea;
  color: #fff;
}

.back-btn::after {
  border: none;
}
</style>
